<template>
	<view class="home-page">
		<view class="home-header" @click="toSearch">
			<view :style="{ height: navBarHeight + 40 + 'px' }"></view>
			<uni-search-bar radius="20" placeholder="请输入您想查找的景点、酒店、民俗" readonly="true"></uni-search-bar>
		</view>
		<view class="home-content">
			<view class="swiper">
				<uni-swiper-dot :info="data" :current="current" mode="round" :dots-styles="dotsStyles">
					<swiper class="swiper-box" circular autoplay :current="current" @change="changeSwiper">
						<swiper-item v-for="(item, index) in data" :key="index">
							<view class="swiper-item">
								<image :src="item.image" mode="scaleToFill" :draggable="false" />
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="margin">
				<image mode="widthFix" src="https://nownc178.cq4oss.ctyunxs.cn/banner/ncyx.png" style="width: 100%"></image>
			</view>
			<view>
				<view class="title margin-lr margin-bottom">定制游精选</view>
				<swiper class="header" circular autoplay previous-margin="220rpx" next-margin="220rpx" :current="current1" @change="changeIndex">
					<swiper-item v-for="(item, index) in routeList" :key="index">
						<!-- 当前所在滑块的 index == index 放大 -->
						<view :class="current1 === index ? 'slide-image active' : 'slide-image quiet'">
							<image mode="aspectFill" :src="item.objKeys[0]"></image>
							<view class="route-name">{{ item.routeName }}</view>
							<button class="detail-btn round" @click="this.$tab.navigateTo('/pages/route/routeDetail?id=' + item.id)">查看详情</button>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view>
				<view class="title margin">热门推荐</view>
				<uni-segmented-control :current="currentTab" :values="tabNameList" @clickItem="onChange" styleType="text" activeColor="#137576"></uni-segmented-control>
				<view class="list-content">
					<view class="item-list" v-for="(item, index) in recommendList" :key="item.id" @click="toDetail(item)">
						<image mode="widthFix" :src="item.pics[0].objKey" class="item-image"></image>
						<view class="item-title">{{ item.locationName }}</view>
						<view class="item-desc">{{ item.address }}</view>
					</view>
				</view>
			</view>
			<view>
				<view class="title margin" @click="this.$tab.navigateTo('/pages/mall/shoppingMall')">特产商城</view>
				<view class="points-mall">
					<view class="card product">
						<view class="product-list">
							<uni-row :gutter="30">
								<uni-col :span="12" v-for="item in mallList" :key="item.id">
									<navigator :url="`/pages/mall/productDetails?content=${encodeURIComponent(JSON.stringify(item))}`">
										<view class="product-item">
											<image :src="item.imageKey" mode="cover" :draggable="false" />
											<view class="product-text">
												<view class="product-title">{{ item.name }}</view>
												<view class="product-integral">
													<text>{{ item.price }}</text>
													元
												</view>
											</view>
										</view>
									</navigator>
								</uni-col>
							</uni-row>
						</view>
						<uni-load-more :status="loadmore" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { appLocPage, getTypeList, getTravelRouteList } from '@/api/index.js';
import { productList } from '@/api/convenientServices';
export default {
	data() {
		return {
			navBarHeight: getApp().globalData.navBarHeight,
			dotsStyles: {
				backgroundColor: '#BCBCBC',
				border: '1px #BCBCBC solid',
				selectedBackgroundColor: '#23E6A9',
				selectedBorder: '1px #23E6A9 solid'
			},
			current: 0,
			current1: 0,
			recommendList: [],
			tabNameList: [],
			tabList: [],
			data: [
				{
					image: 'https://nownc178.cq4oss.ctyunxs.cn/banner/1.png'
				},
				{
					image: 'https://nownc178.cq4oss.ctyunxs.cn/banner/2.png'
				},
				{
					image: 'https://nownc178.cq4oss.ctyunxs.cn/banner/3.png'
				}
			],
			para: {
				current: 0,
				size: 10,
				locationTypeId: 0,
				locationName: ''
			},
			page: {
				current: 1, //第几页
				size: 5 //显示多少条
			},
			mallList: [
				// {
				// 	id:'0',
				// 	name:'方竹笋',
				// 	desc:'南川土特产，营养健康，超值爆款，方竹笋',
				// 	image: 'https://yq.zjol.com.cn/ztpd_12316/ztgj/202105/W020210519322682783667.jpg'
				// },
				// {
				// 	id:'1',
				// 	name:'金佛山贡米',
				// 	desc:'南川土特产，营养健康，超值爆款，金佛山贡米',
				// 	image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.ZlhslJXGqto25tIUEMc7XQAAAA?w=184&h=184&c=7&r=0&o=5&dpr=2&pid=1.7'
				// },
				// {
				// 	id:'2',
				// 	name:'天麻',
				// 	desc:'南川土特产，营养健康，超值爆款，南川天麻',
				// 	image: 'https://www.51xuediannao.com/upload/techan/chongqing/39362.gif'
				// },
				// {
				// 	id:'3',
				// 	name:'水江热灰粑',
				// 	desc:'南川土特产，营养健康，超值爆款，水江热灰粑',
				// 	image: 'https://ts1.cn.mm.bing.net/th/id/R-C.466e9597fbd8776cbba5cdd350db7192?rik=yybaRD%2fYjibUxA&riu=http%3a%2f%2fwww.chandibao.com%2fuploads%2fallimg%2f220212%2f1-220212003K6.jpg&ehk=9tjhLhVDr5s%2f2Z6nwhZCA66CK6srBapd6Gqg4l%2b5aGM%3d&risl=&pid=ImgRaw&r=0'
				// },
				// {
				// 	id:'4',
				// 	name:'大树茶',
				// 	desc:'南川土特产，营养健康，超值爆款，南川大树茶',
				// 	image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.vO7kZL_EeyK-WQmxwmpCcQHaE6?w=289&h=191&c=7&r=0&o=5&dpr=2&pid=1.7'
				// }
			],
			routeList: []
		};
	},
	onLoad() {
		this.getTypeListData();
		this.getRouteData();
		this.getMallList();
	},
	methods: {
		changeSwiper(e) {
			this.current = e.detail.current;
		},
		changeIndex(e) {
			this.current1 = e.detail.current;
		},
		getTypeListData() {
			let that = this;
			getTypeList({}).then((respond) => {
				console.log('tyeListData:', respond.data);
				const dataArr = respond.data;
				if (dataArr && respond.code === 200) {
					dataArr.map((item) => {
						that.tabList.push(item);
						that.tabNameList.push(item.name);
					});
				}
				that.tabList.splice(4, 8);
				that.tabNameList.splice(4, 8);
				const defaultType = dataArr[0].id;
				that.para.locationTypeId = defaultType;
				that.getLocationList();
			});
		},
		getLocationList() {
			let that = this;
			// uni.showLoading({

			// });
			appLocPage(this.para).then((respond) => {
				const dataArr = respond.data;
				// uni.hideLoading();
				that.recommendList = dataArr;
			});
		},
		toDetail(item) {
			uni.navigateTo({
				url: `/pages/map/mapDetail?id=` + item.id
			});
		},
		onChange(e) {
			this.currentTab = e.currentIndex;
			this.para.locationTypeId = this.tabList[e.currentIndex].id;
			this.getLocationList();
		},
		getRouteData() {
			let that = this;
			this.routeList = [];
			const data = {
				current: 0,
				size: 100
			};
			uni.showLoading({
				title: '加载中'
			});
			getTravelRouteList(data).then((respond) => {
				uni.hideLoading();
				const dataArr = respond.data.records;
				that.routeList = dataArr;
			});
		},
		getMallList(userId) {
			productList({ ...this.page, userId }).then((res) => {
				// //请求接口成功之后，判断加载状态，处理数据
				// if (this.ifBottomRefresh) {
				// 	this.dataList= this.dataList.concat(res.data.records)
				// } else {
				this.mallList = res.data.records;
				// }
				// this.ifBottomRefresh = false
				// this.loadmore = this.dataList.length < res.data.total ? 'more' : 'noMore'
			});
		},
		toSearch() {
			uni.navigateTo({
				url: '/pages/search/index'
			});
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;

	.home-page {
		.home-header {
			height: 325rpx;
			background-image: url('');
			background-size: 100% 100%;
			.uni-navbar--border {
				border-bottom: none;
			}
			.uni-nav-bar-text {
				font-size: 16px;
			}
		}
		.home-content {
			margin-top: -90rpx;
			.swiper {
				margin: 30rpx;
				.swiper-box {
					height: 345rpx;
				}

				.swiper-item {
					height: 345rpx;
					image {
						border-radius: 40rpx;
					}
				}
			}
			.action-item {
				image {
					height: 92rpx;
					display: block;
					margin: auto;
				}
				.text {
					margin: 8rpx 0;
					font-weight: bold;
				}
			}
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #2d2d2d;
			}
		}
	}
}
.header {
	box-sizing: border-box;
	width: 100%;
	height: 360rpx;
	margin: auto;
	// background-color: #2a425f;
	// box-shadow: 3px 7px 10px 0px rgb(66, 89, 104,1);
	// color: #fff;
	// border-radius: 10rpx;
	.slide-image {
		// width: 200rpx;
		height: 360rpx;
		// margin-top: 10%;
		position: relative;
		image {
			// width: 100%;
			height: 100%;
			border-radius: 30rpx;
		}
		.route-name {
			padding: 20rpx;
			color: #fff;
			position: absolute;
			top: 20rpx;
		}
		.detail-btn {
			font-size: 24rpx;
			color: #9c10e4;
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			padding: 10rpx 20rpx;
			line-height: 1;
		}
	}

	.active {
		// 中间放大动画
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.quiet {
		// 两边缩小动画
		transform: scale(0.8);
		// opacity: 0.4;
		transition: all 0.5s ease-in 0s;
	}
}

.list-content {
	padding: 30rpx;
	box-sizing: border-box;
	column-count: 2;
}
.item-list {
	margin-top: 20rpx;
	break-inside: avoid;
	width: 330rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	border: 1px solid #7ce3cf;
}
.item-image {
	width: 100%;
	border-radius: 10rpx;
}
.item-title {
	margin-left: 15rpx;
	margin-right: 15rpx;
	font-size: 30rpx;
}
.item-desc {
	margin: 15rpx;
	margin-top: 20rpx;
	display: flex;
	font-size: 26rpx;
	align-items: center;
	justify-content: space-between;
}
.product {
	box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.08);
	border-radius: 16rpx 16rpx 0rpx 0rpx;
	.product-list {
		padding: 0 30rpx 30rpx;
		.product-item {
			margin-top: 30rpx;
			background: #ffffff;
			border-radius: 16rpx;
			border: 1rpx solid #e3e3e3;
			image {
				width: 300rpx;
				height: 225rpx;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
			}
			.product-text {
				padding: 20rpx;
				.product-title {
					font-size: 26rpx;
					line-height: 36rpx;
					margin-bottom: 20rpx;
				}
				.product-integral {
					font-size: 20rpx;
					color: #fc0204;
					text {
						font-size: 26rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
}
</style>
